<template>
	<div class="attr">
		<curr-app :left="245"></curr-app>
		<list-title :data="header"></list-title>
		<el-form :model="categoryAttrForm" :rules="rules" ref="categoryAttrForm" label-width="200px">
			<el-form-item label="字段名称" prop="data.attr_name" style="width: 600px;">
				<el-input v-model="categoryAttrForm.data.attr_name" placeholder="字段名称"></el-input>
			</el-form-item>
			<el-form-item label="字段英文名称" prop="data.attr_enname" style="width: 600px;">
				<el-input v-model="categoryAttrForm.data.attr_enname" placeholder="字段英文名称"></el-input>
				<p class="help">用于前端取值</p>
			</el-form-item>
			<el-form-item label="类型" prop="data.attr_type" style="width: 615px;">
				<el-select v-model="categoryAttrForm.data.attr_type" placeholder="请选择类型">
					<el-option label="单行文本" value="1"></el-option>
					<el-option label="多行文本" value="2"></el-option>
					<el-option label="单选框" value="3"></el-option>
					<el-option label="复选框" value="4"></el-option>
					<el-option label="下拉菜单" value="5"></el-option>
					<el-option label="富编辑器" value="6"></el-option>
					<el-option label="图片上传" value="7"></el-option>
					<el-option label="文件上传" value="8"></el-option>
					<el-option label="日期" value="9"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="字段值" prop="data.attr_value" style="width: 615px;" 
			v-if="(categoryAttrForm.data.attr_type == '3' || categoryAttrForm.data.attr_type == '4' || categoryAttrForm.data.attr_type == '5')">
				<el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="categoryAttrForm.data.attr_value"></el-input>
			</el-form-item>
			<el-form-item label="图片限制数量" prop="data.limit" style="width: 600px;" v-if="(categoryAttrForm.data.attr_type == '7')">
				<template>
					<el-radio v-model="categoryAttrForm.data.limit" label="1">1张</el-radio>
					<el-radio v-model="categoryAttrForm.data.limit" label="2">2张</el-radio>
					<el-radio v-model="categoryAttrForm.data.limit" label="3">3张</el-radio>
					<el-radio v-model="categoryAttrForm.data.limit" label="4">4张</el-radio>
					<el-radio v-model="categoryAttrForm.data.limit" label="5">5张</el-radio>
					<el-radio v-model="categoryAttrForm.data.limit" label="6">6张</el-radio>
					<el-radio v-model="categoryAttrForm.data.limit" label="7">7张</el-radio>
					<el-radio v-model="categoryAttrForm.data.limit" label="8">8张</el-radio>
					<el-radio v-model="categoryAttrForm.data.limit" label="9">9张</el-radio>
					<el-radio v-model="categoryAttrForm.data.limit" label="10">10张</el-radio>
				</template>
			</el-form-item>
			<el-form-item label="默认值" prop="data.default_val" style="width: 600px;" 
			v-if="categoryAttrForm.data.attr_type != '7' && categoryAttrForm.data.attr_type != '8' && categoryAttrForm.data.attr_type != '9'">
				<el-input v-model="categoryAttrForm.data.default_val" placeholder="默认值"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm('categoryAttrForm')" :disabled='categoryAttrForm.submitLock'>
					确 定 <span class="el-icon-loading" v-if='categoryAttrForm.submitLock'></span>
				</el-button>
				<el-button @click="resetForm('categoryAttrForm')" v-if='categoryAttrForm.data.id==0'>重 置</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import ListTitle from "pc/common/Title"
import CurrApp from "pc/common/CurrApp"

export default {
	inject: ['reload'],
	data() {
		return {
			/*appid*/
			appid: this.$route.query.appid,
			/*头部数据*/
			header: {
				title: '添加字段',
				reload: false,
				buttons: [
					{
						title: '字段列表',
						type: 'primary',
						pathName: 'pc/cms/instance/category/CategoryAttrList',
						query: {
							appid: this.$route.query.appid,
						},
					}
				]
			},
			/*字段数据*/
			categoryAttrForm: {
				submitLock: false,
				data: {
					id: 0,
					attr_name: '',
					attr_enname: '',
					attr_type: '1',
					attr_value: '',
					limit: '1',
					default_val: '',
					default: '',
				}
			},
			rules: {
				data: {
					attr_name: [
						{ required: true, message: '请输入字段名称', trigger: 'blur' },
						{ min: 2, max: 16, message: '长度在 2 到 16 个字符', trigger: 'blur' }
					],
					attr_enname: [
						{ required: true, message: '请输入字段英文名称', trigger: 'blur' },
						{ min: 2, max: 16, message: '长度在 2 到 16 个字符', trigger: 'blur' }
					],
				}
			}
		};
	},
	components: {
		ListTitle,
		CurrApp
	},
	created: function() {
		/*如果是修改，取出旧数据*/
		if(this.$route.query.id){
			this.getCategoryAttr(this.$route.query.id)
		}
	},
	methods: {
		/*取出需要修改的数据*/
		getCategoryAttr: function(){
			if(this.$api.modifyCategoryAttr != undefined){
				this.header.title = '编辑栏目'
				/*取出需要修改的数据*/
				this.categoryAttrForm.submitLock = true;
				this.$baseURL(this.$domain.cms)
				this.$get(this.$api.modifyCategoryAttr, {
					appid: this.appid,
					'id': this.$route.query.id
				}).then(res => {
					// if(res.data.code == 10007){//后台提示需要登录
					// 	this.$cookie.remove('isLogin');//刪除cookie登录信息
					// 	this.reload();
					// }
					if(res.data.code == 0){
						// console.log(res.data.data)
						this.categoryAttrForm.data.id = res.data.data.attr_id
						this.categoryAttrForm.data.attr_name = res.data.data.attr_name
						this.categoryAttrForm.data.attr_enname = res.data.data.attr_enname
						this.categoryAttrForm.data.attr_type = res.data.data.attr_type
						this.categoryAttrForm.data.attr_value = res.data.data.attr_value
						this.categoryAttrForm.data.limit = res.data.data.limit
						this.categoryAttrForm.data.default_val = res.data.data.default_val
					}else{
						this.$message({
							showClose: true,
							message: res.data.info,
							type: 'error'
						});
					}
					this.categoryAttrForm.submitLock = false;
				})
				.catch(err => {})
				.finally(() => {}) 
			}
		},
		/*提交添加、修改表单*/
		submitForm(formName) {
			if(!this.categoryAttrForm.submitLock){
				this.$refs[formName].validate((valid) => {
					if (valid) {
						// console.log(this.categoryAttrForm.data)
						// return
						this.categoryAttrForm.submitLock = true;
						/*添加、修改分类*/
						let apiUrl = this.$api.addCategoryAttr//默认是添加
						if(this.categoryAttrForm.data.id > 0){//修改
							apiUrl = this.$api.modifyCategoryAttr
						}
						if(apiUrl != undefined){
							/*添加菜单*/
							this.$baseURL(this.$domain.cms)
							this.$post(apiUrl, {
								appid: this.appid,
								ContentCategoryAttr: this.categoryAttrForm.data,
							}).then(res => {
								// console.log(res);
								/*成功*/
								if(res.data.code == 0){
									this.$message({
										showClose: true,
										message: res.data.info,
										type: 'success'
									});
									if(this.categoryAttrForm.data.id > 0){
										this.$router.go(-1)	
									}else{
										this.$refs[formName].resetFields();
									}
								}else{
									this.$message({
										showClose: true,
										message: res.data.info,
										type: 'error'
									});
								}
								this.categoryAttrForm.submitLock = false;
							});
						}
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			}
		},
		/*重置表单*/
		resetForm(formName) {
			this.$refs[formName].resetFields();
		},
	},
    computed: {
    	
    }
};
</script>

<style lang="stylus" scoped>
.attr
	form
		margin-top: 10px
</style>